<template>
    <view>
        <header>
            <!-- <button class="return-btn">
            <img src="image/comeback.png" alt="返回">
        </button> -->

            <view class="search-container">
                <input type="text" placeholder="搜索卖出的宝贝" class="search-input">
                <img src="/static/tab/Searching.png" class="search-icon" alt="搜索">
            </view>

            <view class="head-right">
                <view class="head-btn">
                    <img src="/static/tab/bill.png" alt="账单">
                    <span>账单</span>
                </view>
                <view class="head-btn">
                    <img src="/static/tab/filter.png" alt="筛选">
                    <span>筛选</span>
                </view>
                <view class="head-btn">
                    <img src="/static/tab/batch.png" alt="批量">
                    <span>批量</span>
                </view>
            </view>
        </header>
        <view class="tabs" id="tabs">
            <view class="tab active" data-target="all">全部</view>
            <view class="tab" data-target="pending">待付款</view>
            <view class="tab" data-target="ship">待发货</view>
            <view class="tab" data-target="receive">待收货</view>
            <view class="tab" data-target="rate">待评价</view>
            <view class="tab" data-target="refund">退款中</view>
            <view class="tab-underline"></view>
        </view>

        <view class="list-container">
            <view class="list-item">
                <view class="buyer-info">
                    <img src="https://img2.baidu.com/it/u=811196224,1705671897&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                        class="buyer-avatar" alt="头像1">
                    <view class="buyer-name">用户名称</view>
                    <view class="order-situation">待发货</view>
                </view>

                <view class="product-content">
                    <img src="https://ms.bdimg.com/pacific/0/pic/-786191241_580207014.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00"
                        class="item-image" alt="商品图片1">
                    <view class="info-and-price">
                        <view class="item-details">
                            <view class="item-title">商品内容示例</view>
                            <!-- 合并标签样式 -->
                            <view class="product-tags">
                                <span class="product-tag label">24小时发货</span>
                                <span class="product-tag label">描述不符全额退</span>
                            </view>
                        </view>
                        <view class="price-quantity">
                            <view class="item-price">¥200.00</view>
                            <view class="item-quantity">x1</view>
                        </view>
                    </view>
                </view>

                <view class="item-actions">
                    <a href="#" class="action-btn2">更多</a>
                    <a href="#" class="action-btn contact">联系买家</a>
                    <a href="#" class="action-btn primary">前往发货</a>
                </view>
            </view>

            <view class="list-item">
                <view class="buyer-info">
                    <img src="https://img2.baidu.com/it/u=811196224,1705671897&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                        class="buyer-avatar" alt="头像2">
                    <view class="buyer-name">用户名称</view>
                    <view class="order-situation">正在送货</view>
                </view>

                <view class="product-content">
                    <img src="https://ms.bdimg.com/pacific/0/pic/-786191241_580207014.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00"
                        class="item-image" alt="商品图片2">
                    <view class="info-and-price">
                        <view class="item-details">
                            <view class="item-title">商品内容示例</view>
                            <view class="product-tags">
                                <span class="product-tag label">24小时发货</span>
                                <span class="product-tag label">描述不符全额退</span>
                            </view>
                        </view>
                        <view class="price-quantity">
                            <view class="item-price">¥200.00</view>
                            <view class="item-quantity">x4</view>
                        </view>
                    </view>
                </view>

                <view class="item-actions">
                    <a href="#" class="action-btn2">更多</a>
                    <a href="#" class="action-btn contact">联系买家</a>
                    <a href="#" class="action-btn contact">正在送货</a>
                </view>
            </view>

            <view class="list-item">
                <view class="buyer-info">
                    <img src="https://img2.baidu.com/it/u=811196224,1705671897&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                        class="buyer-avatar" alt="头像3">
                    <view class="buyer-name">用户名称</view>
                    <view class="order-situation">已送达</view>
                </view>

                <view class="product-content">
                    <img src="https://ms.bdimg.com/pacific/0/pic/-786191241_580207014.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00"
                        class="item-image" alt="商品图片">
                    <view class="info-and-price">
                        <view class="item-details">
                            <view class="item-title">商品内容示例</view>
                            <view class="product-tags">
                                <span class="product-tag label">24小时发货</span>
                                <span class="product-tag label">描述不符全额退</span>
                            </view>
                        </view>
                        <view class="price-quantity">
                            <view class="item-price">¥400.00</view>
                            <view class="item-quantity">x3</view>
                        </view>
                    </view>
                </view>

                <view class="item-actions">
                    <a href="#" class="action-btn2">更多</a>
                    <a href="#" class="action-btn contact">联系买家</a>
                    <a href="#" class="action-btn contact">提醒收货</a>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style scoped>
header {
    background: #ffffff;
    padding: 1upx 16upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2upx 12upx rgba(255, 255, 255, 0.08);
    top: -100upx;
    z-index: 10;
}

.search-container {
    flex: 1;
    position: relative;
    margin: 0 50upx;
}

.search-input {
    width: 97%;
    height: 50upx;
    line-height: 50upx;
    padding: 0 10upx 0 36upx;
    border: 1px solid #ddd;
    border-radius: 18upx;
    font-size: 20upx;
    outline: none;
    background: #fbfbfb;
}

.search-icon {
    position: absolute;
    left: 5upx;
    top: 50%;
    transform: translateY(-50%);
    width: 25upx;
    height: 25upx;
}

.head-right {
    display: flex;
    margin-left: 18upx;
    align-items: center;
}

.head-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5upx;
    cursor: pointer;
}

.head-btn img {
    width: 30upx;
    height: 30upx;
    margin-right: 20upx;
}

.head-btn span {
    font-size: 20upx;
    color: #3c3c3c;
    text-align: center;
    margin-right: 20upx;
}





.buyer-info {
    display: flex;
    align-items: center;
    margin-bottom: 30upx;
}

.buyer-avatar {
    width: 40upx;
    height: 40upx;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 2upx;
    flex-shrink: 0;
    background-color: #f2f2f2;
    border: 1px solid #eee;
}

.buyer-name {
    font-size: 24upx;
    color: #666;
    flex: 1;
}

.order-situation {
    font-size: 24upx;
    padding: 3upx 8upx;
    border-radius: 4upx;
    font-weight: 500;
    white-space: nowrap;
}

/* 订单页商品信息布局 */
.info-and-price {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.item-details {
    flex: 1;
    min-width: 0;
}

.price-quantity {
    text-align: right;
}

.item-quantity {
    color: #666;
    font-size: 23upx;
}

/* 订单页标签样式 */
.product-tags {
    display: flex;
    gap: 6upx;
    flex-wrap: wrap;
}

.product-tag.label {
    border-radius: 4upx;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    font-size: 22upx;
    padding: 2upx 8upx;
    color: #666;
    white-space: nowrap;
}

.product-tag.label.highlight {
    color: #535353;
    border-color: #ffeeee;
    background-color: #fff8f8;
}

/* 订单页主要按钮样式 */
.action-btn.primary {
    background-color: #484848;
    border-color: #484848;
    color: #ffffff;
}

.action-btn.primary:hover {
    background-color: #686868;
    box-shadow: 0 2px 8px rgba(113, 113, 113, 0.3);
}


.return-btn {
    border: none;
    background: none;
    padding: 5upx;
    margin-right: 5upx;
    cursor: pointer;
}

header img,
.return-btn img {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 4upx;
    width: 34upx;
    height: 34upx;
    transition: all 0.3s ease;
}

/* 标签栏通用样式 */
.tabs {
    display: flex;
    background-color: #fff;
    border-bottom: 2upx solid #f0f0f0;
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 20upx;
    scrollbar-width: none;
}

.tabs:-webkit-scrollbar {
    display: none;
}

.tab {
    width: 17%;
    padding: 14upx 0;
    font-size: 20upx;
    color: #666;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s ease;
}

.tab.active {
    color: #474747;
    font-weight: 600;
}

.tab:hover:not(.active) {
    color: #333;
}

.tab .badge {
    display: inline-block;
    background-color: #474747;
    color: white;
    font-size: 20upx;
    width: 30upx;
    height: 30upx;
    border-radius: 50%;
    line-height: 30upx;
    text-align: center;
    margin-left: 4upx;
    vertical-align: top;
    transform: translateY(-2upx);
}

.tab-underline {
    position: absolute;
    bottom: 0;
    height: 3upx;
    background-color: #474747;
    border-radius: 2upx;
    transition: all 3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 列表容器基础样式 */
.list-container {
    padding: 8upx;
}

/* 列表项基础样式 */
.list-item {
    background-color: #fff;
    border-radius: 18upx;
    padding: 16upx;
    margin-bottom: 18upx;
    border-bottom: 2upx solid #f9f9f9;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: fadeIn 0.3s ease forwards;
}

.list-item:hover {
    transform: translateY(-2upx);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.list-item:nth-child(1) {
    animation-delay: 0.1s;
}

.list-item:nth-child(2) {
    animation-delay: 0.2s;
}

.list-item:nth-child(3) {
    animation-delay: 0.3s;
}

/* 商品内容基础样式 */
.product-content {
    display: flex;
    gap: 20upx;
    align-items: center;
    margin-bottom: 25upx;
}

.item-image {
    width: 50upx;
    height: 50upx;
    border-radius: 8upx;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #f9f9f9;
}

.item-title {
    font-size: 16upx;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8upx;
}

.item-price {
    color: #535353;
    font-size: 30upx;
    font-weight: bold;
}

/* 操作按钮基础样式 */
.item-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2upx;
    margin-top: auto;
    padding-top: 16upx;
    border-top: 1px solid #f5f5f5;

}

.action-btn2 {
    padding: 10upx 13upx;
    border-radius: 30upx;
    font-size: 25upx;
    text-decoration: none;
    color: #d7d7d7;
    cursor: pointer;

}

.action-btn {
    padding: 10upx 13upx;
    border-radius: 30upx;
    font-size: 24upx;
    text-decoration: none;
    border: 2upx solid #ddd;
    color: #333;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 20upx;
}

.action-btn.more {
    margin-right: auto;
    background-color: #fff;
    border-color: #ddd;
}

.action-btn.contact {
    background-color: #f5f5f5;
    border-color: #ddd;
}

.action-btn.contact:hover {
    background-color: #eeeeee;
}

/* 加载动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(11upx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
